<template>
  <el-popover :visible="visible" :width="popoverWidth" :hide-after="0">
    <template #reference>
      <el-input
        :model-value="modelValue"
        clearable
        placeholder=""
        @click="visible = true"
        @blur="visible = false"
        @input="(e) => emits('update:modelValue', e)"
      >
        <template #prepend>
          <el-button :icon="modelValue as string" disabled />
        </template>
      </el-input>
    </template>
    <div class="el-icon-picker">
      <div v-for="icon in globalProperties.$icons" :key="icon">
        <component
          :class="[icon, 'icon', { 'icon-active': icon == modelValue }]"
          :is="icon"
          @click="selectedIcon(icon)"
        />
      </div>
    </div>
  </el-popover>
</template>
<script setup lang="ts">
const {
  appContext: {
    app: {
      config: { globalProperties }
    }
  }
} = getCurrentInstance() as any

interface Props {
  modelValue?: string
  popoverWidth?: number
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  popoverWidth: 300
})

const emits = defineEmits(['change', 'update:modelValue'])

const { modelValue, popoverWidth } = toRefs(props)

const visible = ref<boolean>(false)

const selectedIcon = (icon: string) => {
  visible.value = false
  emits('update:modelValue', icon)
  emits('change', icon)
}
</script>
<style lang="less" scoped>
.el-icon-picker {
  display: flex;
  height: 200px;
  overflow-y: scroll;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 5px;
  font-size: 20px;
  line-height: 45px;
  color: var(--el-text-color-regular);
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
}

.icon:hover {
  color: var(--el-color-primary);
}

.icon-active {
  color: var(--el-color-primary);
}
</style>
